<template>
    <div>
        <div style="padding: 2px 10px 10px 10px">
            <el-button type="primary" @click="handleAddDictType">新增字典</el-button>
        </div>
        <el-table :data="dictTypeList" @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="55" align="center"/>
            <el-table-column label="字典编号" align="center" prop="dictId"/>
            <el-table-column label="字典名称" align="center" prop="dictName" :show-overflow-tooltip="true"/>
            <el-table-column label="字典类型" align="center" :show-overflow-tooltip="true">
                <template v-slot="scope">
                    <router-link :to="'/system/dict-data/index/' + scope.row.dictType" class="link-type">
                        <span>{{ scope.row.dictType }}</span>
                    </router-link>
                </template>
            </el-table-column>
            <el-table-column label="状态" align="center" prop="status" :formatter="statusFormat"/>
            <el-table-column label="备注" align="center" prop="remark" :show-overflow-tooltip="true"/>
            <el-table-column label="创建时间" align="center" prop="createTime" width="180"></el-table-column>
            <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
                <template v-slot="scope">
                    <el-button
                           
                            type="text"
                            icon="el-icon-edit"
                            @click="handleUpdateDictType(scope.row)"
                    >修改
                    </el-button>
                    <el-button
                           
                            type="text"
                            icon="el-icon-delete"
                            @click="handleDeleteDictType(scope.row)"
                    >删除
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination
                layout="prev, pager, next, jumper"
                :total="total"
                :page-size="queryParams.pageSize"
                :current-page="queryParams.pageNum"
                @current-change="handleDictTypeListChange"
                prev-text="上一页" next-text="下一页"
                :hide-on-single-page="true">
        </el-pagination>
    </div>
    <update :title="title" :open="open" :form="form"
            v-on:dialogStatusChanged="changeDialogStatus($event)">
    </update>
</template>

<script>
    import {getDictTypeList, deleteSysDictType} from '/src/api/system/dict'
    import update from './update.vue'

    export default {
        name: "index",
        components: {update},
        data() {
            return {
                // 状态数据字典
                statusOptions: [],
                //查询参数
                queryParams: {
                    pageNum: 1,
                    pageSize: 10
                },
                dateRange: [],
                //查询结果
                dictTypeList: [],
                total: 0,
                //修改或添加的
                title: '',
                open: false,
                form: {},
            }
        },
        created() {
            this.init()
        },
        methods: {
            //初始化
            init() {
                this.getDicts("sys_normal_disable").then(response => {
                    this.statusOptions = response.data;
                });
                this.getDictTypeListByParam()
            },
            getDictTypeListByParam() {
                getDictTypeList(this.addDateRange(this.queryParams, this.dateRange)).then(response => {
                        this.dictTypeList = response.rows;
                        this.total = response.total;
                    }
                );
            },
            //当选择项发生变化时会触发该事件
            handleSelectionChange() {

            },
            //添加数据字典类型
            handleAddDictType() {
                this.title = "新增数据字典"
                this.open = true
                this.form = {}
            },
            //修改数据字典类型
            handleUpdateDictType(row) {
                this.title = "修改数据字典"
                this.open = true
                this.form = row
            },
            //删除数据字典类型
            handleDeleteDictType(row) {
                this.$confirm('是否确认删除名称为"' + row.dictType + '"的数据项?', "警告", {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning"
                }).then(function () {
                    return deleteSysDictType(row.dictId);
                }).then(() => {
                    this.getDictTypeListByParam();
                    this.msgSuccess("删除成功");
                })
            },
            // 字典状态字典翻译
            statusFormat(row, column) {
                return this.selectDictLabel(this.statusOptions, row.status);
            },
            //分页数据改变
            handleDictTypeListChange: function (currentPageNum) {
                this.queryParams.pageNum = currentPageNum
                this.getDictTypeListByParam()
            },
            //更改弹出框的状态
            changeDialogStatus(status) {
                this.open = status
                this.getDictTypeListByParam()
            },
        }
    }
</script>

<style scoped>

</style>
